<template>

    <div>
        

    <div class="contentpanel" style="height: calc(100vh);">

        <!-- 弹窗暗色背景 -->
        <div class="v-modal" style="z-index: 2022;" v-if="is_adduser||is_del_department||is_delete||is_redact||is_select_dep||is_del_users"></div>
        <!-- /弹窗暗色背景 -->


        <!-- 选择部门 -->
        <div class="el-dialog__wrapper dialog-tree fixed"
         style="z-index: 9999;" v-if="is_select_dep">
            <div class="el-dialog el-dialog--center" style="width: 440px; margin-top: 15vh;">
                <div class="el-dialog__header">
                    <span class="el-dialog__title">选择部门</span>
                    <button type="button" aria-label="Close" class="el-dialog__headerbtn">
                        <i class="el-dialog__close el-icon el-icon-close"></i>
                    </button>
                </div>
                <div class="el-dialog__body">
                    <div isfilter="true" class="tree-wrapper ksx-tree">
                        <div class="el-input">
                            <input type="text" autocomplete="off"
                             placeholder="输入关键字进行过滤" class="el-input__inner">
                        </div>
                        <div role="tree" style="margin-top:20px;" class="el-tree el-tree--highlight-current">
                            <!-- 无限极分类 子组件 -->
                            <treelist_read v-for="(val, index) in depart_data"
                             :key="index" :depart="val" @get_department="get_department"></treelist_read>
                            <!-- /无限极分类 -->
                        </div>
                    </div> 
                </div>

                <div class="el-dialog__footer">
                    <span class="dialog-footer">
                        <button @click="is_select_dep='';depart_name=null;" type="button" class="el-button el-button--primary is-plain">
                            <span>取消</span>
                        </button>
                        <button @click="is_select_dep=''" type="button" class="el-button el-button--primary">
                            <span>确 定</span>
                        </button>
                    </span>
                </div>
            </div>
        </div>
        <!-- /选择部门 -->

        <!-- 添加成员表单 -->
        <div 
        class="el-dialog__wrapper dialog-dep-user-info fixed" 
        id="dialogEditUser" 
        style="z-index: 2026;"
        v-if="is_adduser">
            <div 
            class="el-dialog el-dialog--center" 
            style="width: 440px; margin-top: 15vh;">
                <div class="el-dialog__header">
                    <span class="el-dialog__title">
                        添加人员
                    </span>
                    <button type="button" @click.prevent="is_adduser=''" class="el-dialog__headerbtn">
                        <i class="glyphicon glyphicon-remove" style="color: #909399;"></i>
                    </button>
                </div>
                <div class="el-dialog__body">
                    <!-- 表单 -->
                    <form action="">
                        <div class="form-group" style="text-align:center;">
                            <label class="col-sm-4 control-label">
                                <font style="vertical-align: inherit;">* 手机号(账号)</font>
                            </label>
                            <div class="col-sm-8">
                                <input type="text"
                                    placeholder="请输入手机号(账号)" 
                                    id="disabledinput" 
                                    class="form-control input-sm mb15"
                                    v-model="mobile">
                            </div>
                        </div>
                        <div class="form-group" style="text-align:center;">
                            <label class="col-sm-4 control-label">
                                <font style="vertical-align: inherit;">* 姓名</font>
                            </label>
                            <div class="col-sm-8">
                                <input type="text"
                                    placeholder="请输入姓名"
                                    class="form-control input-sm mb15"
                                    v-model="name">
                            </div>
                        </div>
                        <!-- 修改密码 -->
                        <div class="form-group" style="text-align:center;">
                            <label class="col-sm-4 control-label">
                                <font style="vertical-align: inherit;">* 密码</font>
                            </label>
                            <div class="col-sm-8">
                                <input type="text"
                                    placeholder="请输入密码"
                                    class="form-control input-sm mb15"
                                    v-model="password">
                                <input type="text"
                                    placeholder="确认密码"
                                    class="form-control input-sm mb15"
                                    v-model="is_password">
                            </div>
                        </div>
                        <div class="form-group" style="text-align:center;">
                            <label class="col-sm-4 control-label">
                                <font style="vertical-align: inherit;">性别</font>
                            </label>
                            <div class="col-sm-8">
                                <span class="el-radio__input is-checked" style="float:left;">
                                    <input type="radio" name="sex" v-model="gender" value="1">
                                </span>
                                <span style="float:left; margin-right:10px;">男</span>

                                <span class="el-radio__input is-checked" style="float:left;">
                                    <input type="radio" name="sex" v-model="gender" value="2">
                                </span>
                                <span style="float:left; margin-right:10px;">女</span>
                            </div>
                        </div>
                        <div class="form-group" style="text-align:center;">
                            <label class="col-sm-4 control-label">
                                <font style="vertical-align: inherit;">证件号</font>
                            </label>
                            <div class="col-sm-8">
                                <input type="text" 
                                placeholder="请输入证件号" 
                                v-model="idnumber"
                                class="form-control input-sm mb15">
                            </div>
                        </div>
                        <div class="form-group" style="text-align:center;">
                            <label class="col-sm-4 control-label">
                                <font style="vertical-align: inherit;">部门</font>
                            </label>
                            <div class="el-form-item__content col-sm-8 mb15">
                                <div class="choose" @click="is_select_dep=1">{{depart_name ? depart_name:'添加部门'}}</div>
                            </div>
                        </div>
                        <div class="form-group" style="text-align:center;">
                            <label class="col-sm-4 control-label">
                                <font style="vertical-align: inherit;">邮箱</font>
                            </label>
                            <div class="col-sm-8">
                                <input type="text" 
                                placeholder="请输入邮箱地址" 
                                v-model="email"
                                class="form-control input-sm mb15">
                            </div>
                        </div>
                        <div class="form-group" style="text-align:center;">
                            <label class="col-sm-4 control-label">
                                <font style="vertical-align: inherit;">证件照</font>
                            </label>
                            <div class="col-sm-8">
                                <input type="file" name="" id="">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="el-dialog__footer">
                    <span class="dialog-footer">
                        <button type="button" 
                        @click.prevent="is_adduser='';depart_name=null;" 
                        class="el-button el-button--primary is-plain">
                            <span>取消</span>
                        </button>
                        <button type="button" 
                        class="el-button el-button--primary"
                        @click.prevent="adduser()">
                            <span>确 定</span>
                        </button>
                    </span>
                </div>
            </div>
        </div>
        <!-- /添加成员表单 -->

        <!-- 修改成员表单 -->
        <div 
        class="el-dialog__wrapper dialog-dep-user-info fixed" 
        id="dialogEditUser" 
        style="z-index: 2026;"
        v-if="is_redact">
            <div 
            class="el-dialog el-dialog--center" 
            style="width: 440px; margin-top: 15vh;">
                <div class="el-dialog__header">
                    <span class="el-dialog__title">
                        编辑人员
                    </span>
                    <button type="button" @click.prevent="is_redact=''" class="el-dialog__headerbtn">
                        <i class="glyphicon glyphicon-remove" style="color: #909399;"></i>
                    </button>
                </div>
                <div class="el-dialog__body">
                    <!-- 表单 -->
                    <form action="">
                        <div class="form-group" style="text-align:center;">
                            <label class="col-sm-4 control-label">
                                <font style="vertical-align: inherit;">* 手机号/账号</font>
                            </label>
                            <div class="col-sm-8">
                                <input type="text"
                                    :placeholder="userinfo.mobile" 
                                    id="disabledinput" 
                                    class="form-control input-sm mb15" disabled
                                    v-model="mobile">
                            </div>
                        </div>
                        <div class="form-group" style="text-align:center;">
                            <label class="col-sm-4 control-label">
                                <font style="vertical-align: inherit;">* 姓名</font>
                            </label>
                            <div class="col-sm-8">
                                <input type="text"
                                    :placeholder="userinfo.name"
                                    class="form-control input-sm mb15"
                                    v-model="name">
                            </div>
                        </div>
                        <!-- 修改密码 -->
                        <div class="form-group" style="text-align:center;">
                            <label class="col-sm-4 control-label">
                                <font style="vertical-align: inherit;">修改密码</font>
                            </label>
                            <div class="col-sm-8">
                                <input type="text"
                                    placeholder="请输入密码"
                                    class="form-control input-sm mb15"
                                    v-model="password">
                                <input type="text"
                                    placeholder="确认密码"
                                    class="form-control input-sm mb15"
                                    v-model="is_password">
                            </div>
                        </div>
                        <div class="form-group" style="text-align:center;">
                            <label class="col-sm-4 control-label">
                                <font style="vertical-align: inherit;">性别</font>
                            </label>
                            <div class="col-sm-8">
                                <span class="el-radio__input is-checked" style="float:left;">
                                    <input type="radio" name="sex" v-model="gender" value="1">
                                </span>
                                <span style="float:left; margin-right:10px;">男</span>

                                <span class="el-radio__input is-checked" style="float:left;">
                                    <input type="radio" name="sex" v-model="gender" value="2">
                                </span>
                                <span style="float:left; margin-right:10px;">女</span>
                            </div>
                        </div>
                        <div class="form-group" style="text-align:center;">
                            <label class="col-sm-4 control-label">
                                <font style="vertical-align: inherit;">证件号</font>
                            </label>
                            <div class="col-sm-8">
                                <input type="text" 
                                :placeholder="userinfo.idnumber ? userinfo.idnumber : '请输入证件号'" 
                                v-model="idnumber"
                                class="form-control input-sm mb15">
                            </div>
                        </div>
                        <div class="form-group" style="text-align:center;">
                            <label class="col-sm-4 control-label">
                                <font style="vertical-align: inherit;">部门</font>
                            </label>
                            <div class="el-form-item__content col-sm-8 mb15">
                                <div class="choose" @click="is_select_dep=1">
                                    {{depart_name ? depart_name:userinfo.dep.dep_name}}
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="text-align:center;">
                            <label class="col-sm-4 control-label">
                                <font style="vertical-align: inherit;">邮箱</font>
                            </label>
                            <div class="col-sm-8">
                                <input type="text" 
                                :placeholder="userinfo.email ? userinfo.email : '请输入邮箱地址'" 
                                v-model="email"
                                class="form-control input-sm mb15">
                            </div>
                        </div>
                        <div class="form-group" style="text-align:center;">
                            <label class="col-sm-4 control-label">
                                <font style="vertical-align: inherit;">证件照</font>
                            </label>
                            <div class="col-sm-8">
                                <input type="file" name="" id="">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="el-dialog__footer">
                    <span class="dialog-footer">
                        <button type="button" 
                        @click.prevent="is_redact='';depart_name=null;" 
                        class="el-button el-button--primary is-plain">
                            <span>取消</span>
                        </button>
                        <button type="button" @click.prevent="UpdateExamUserInfo(userinfo.id)"
                            class="el-button el-button--primary">
                            <span>确 定</span>
                        </button>
                    </span>
                </div>
            </div>
        </div>
        <!-- /修改成员表单 -->

        <!-- 删除成员 -->
        <div 
        class="el-dialog__wrapper dialog-dep-user-info fixed" 
        id="dialogEditUser" 
        style="z-index: 2026;"
        v-if="is_delete">
        <div class="el-dialog--center">
        <div class="el-message-box operation-warning el-message-box--center">
            <div class="el-message-box__header">
                <div class="el-message-box__title">
                    <div class="el-message-box__status el-icon-warning"></div>
                    <span>删除人员</span>
                </div>
                <button type="button" @click.prevent="is_delete=''" aria-label="Close" class="el-message-box__headerbtn">
                    <i class="glyphicon glyphicon-remove" style="color: #909399;"></i>
                </button>
            </div>
            <div class="el-message-box__content">
                <div class="el-message-box__message">
                    <p>此操作将永久删除该人员, 是否继续?</p>
                </div>
                <div class="el-message-box__input" style="display: none;">
                    <div class="el-input">
                        <input type="text" autocomplete="off" placeholder="" class="el-input__inner">
                    </div>
                    <div class="el-message-box__errormsg" style="visibility: hidden;"></div>
                </div>
            </div>
            <div class="el-message-box__btns">
                <button type="button" @click.prevent="is_delete=''" 
                class="el-button el-button--default el-button--small cancel">
                    <span>取消</span>
                </button>
                <button type="button" @click.prevent="del()" 
                class="el-button el-button--default el-button--small el-button--primary confirm">
                    <span>确定</span>
                </button>
            </div>
        </div>
        </div>
        </div>
        <!-- /删除成员 -->

        <!-- 删除部门 -->
        <div 
         class="el-dialog__wrapper dialog-dep-user-info fixed" 
         id="dialogEditUser" 
         style="z-index: 2026;"
         v-if="is_del_department">
        <div class="el-dialog--center">
            <div class="el-message-box operation-warning el-message-box--center">
                <div class="el-message-box__header">
                    <div class="el-message-box__title">
                        <div class="el-message-box__status el-icon-warning"></div>
                        <span></span>
                    </div>
                    <button type="button" @click.prevent="is_del_department=''"
                     aria-label="Close" class="el-message-box__headerbtn">
                        <i class="glyphicon glyphicon-remove" style="color: #909399;"></i>
                    </button>
                </div>
                <div class="el-message-box__content">
                    <div class="el-message-box__message">
                        <p>此部门下包含人员或部门，确认删除？</p>
                    </div>
                    <div class="el-message-box__input" style="">
                        <div class="el-input">
                            <input type="text" autocomplete="off"
                             placeholder="输入DEL确认删除" class="el-input__inner" 
                             v-model="input_DEL">
                        </div>
                        <div class="el-message-box__errormsg" style="visibility: hidden;"></div>
                    </div>
                </div>
                <div class="el-message-box__btns">
                    <button  @click="is_del_department=''" type="button" class="el-button el-button--default el-button--small cancel">
                        <span>取消</span>
                    </button>
                    <button type="button" @click.prevent="DEL_department_True()" class="el-button el-button--default
                     el-button--small el-button--primary confirm">
                        <span>确定</span>
                    </button>
                </div>
            </div>
        </div>
        </div>
        <!-- /删除部门 -->

        <!-- 删除多个成员 -->
        <div 
         class="el-dialog__wrapper dialog-dep-user-info fixed" 
         id="dialogEditUser" 
         style="z-index: 2056;"
         v-if="is_del_users">
        <div class="el-dialog--center">
            <div class="el-message-box operation-warning el-message-box--center">
                <div class="el-message-box__header">
                    <div class="el-message-box__title">
                        <div class="el-message-box__status el-icon-warning"></div>
                        <span>确认删除选中的部门或人员?</span>
                    </div>
                    <button type="button" @click.prevent="is_del_users=''"
                     aria-label="Close" class="el-message-box__headerbtn">
                        <i class="glyphicon glyphicon-remove" style="color: #909399;"></i>
                    </button>
                </div>
                
                <div class="el-message-box__content">
                    <div class="el-message-box__message">
                        <p>此操作将永久删除所选部门或人员, 是否继续?</p>
                    </div>
                    <div class="el-message-box__input" style="">
                        <div class="el-input">
                            <input type="text" autocomplete="off"
                             placeholder="输入DEL确认删除" class="el-input__inner" 
                             v-model="input_DEL">
                        </div>
                        <div class="el-message-box__errormsg" style="visibility: hidden;"></div>
                    </div>
                </div>
                <div class="el-message-box__btns">
                    <button @click="is_del_users=''" type="button" class="el-button el-button--default el-button--small cancel">
                        <span>取消</span>
                    </button>
                    <button type="button" @click.prevent="Del_users()" class="el-button el-button--default
                     el-button--small el-button--primary confirm">
                        <span>确定</span>
                    </button>
                </div>
            </div>
        </div>
        </div>
        <!-- /删除多个成员 -->

        <div class="row" style="height:100%;">
            <div class="content user-manager">

                <div id="userList2" class="content-left">
                    <div id="departmentTree" class="department-tree">
                        <div class="title">部门名称</div> 
                        <div class="tree-wrapper ksx-tree ksx-tree-node">

                            <div role="tree" class="el-tree">
                                <!-- 无限极分类 子组件 -->
                                <treelist v-for="(val, index) in depart_data"
                                :depart="val" :key="index" @get_dep_user="get_dep_user"
                                 @del_department="del_department"></treelist>
                                <!-- /无限极分类 -->
                                
                            </div>
                            
                        </div>
                    </div>
                </div>
                

                <div id="userList3" class="content-right">
                    <div class="detail-list el-table-area">
                        
                        <div class="table-responsive">
                            <div class="el-table el-table--fit el-table--border el-table--scrollable-x el-table--enable-row-transition" 
                            style="width: 100%; height: 100%;">
                                <div class="el-table__header-wrapper">
                                    
                                    <table style="width:97%; margin:0 auto;">
                                        <thead>
                                        <tr style="height:54px;">
                                            <th style="width:80px;">
                                                <input type='checkbox' v-model='checked' @click='checkedAll'>
                                            </th>
                                            <th>名称</th>
                                            <th>账号</th>
                                            <th>积分</th>
                                            <th>证件照</th>
                                            <th>创建时间</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        <tr v-for="user in user_data">
                                            <td>
                                                <input type="checkbox" name="exam_check" 
                                                v-model="user_ids" :value="user.id">
                                            </td>
                                            <td>{{user.name}}</td>
                                            <td>{{user.mobile}}</td>
                                            <td>{{user.integral}}</td>
                                            <td><img :src="'http://127.0.0.1:8000/img/'+user.image" alt="证件照"></td>
                                            <td>{{user.create_time}}</td>
                                            <td>
                                                <div class="cell">
                                                    <a href="" @click.prevent="GetExamUserInfo(user.id,user.dep.id);" 
                                                    style="padding-right:5px;"> 
                                                        <i class="glyphicon glyphicon-pencil"></i> 
                                                    </a>
                                                
                                                    <a href="" @click.prevent="is_delete=1;exam_id=user.id;" 
                                                    style="padding-left:5px;"> 
                                                        <i class="glyphicon glyphicon-trash"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td rowspan="1" colspan="7" class="el-table_1_column_9"
                                            style="padding-right:80px;">
                                                <div class="cell" style="float:right;">
                                                    <button type="button"
                                                     class="el-button el-button--primary is-plain el-button--mini"
                                                     @click.prevent="Is_del_users()">
                                                        <i class="glyphicon glyphicon-trash"></i>
                                                        <span>删除</span>
                                                    </button>
                                                    <button type="button" 
                                                    class="el-button el-button--primary el-button--mini"
                                                    @click.prevent="is_adduser=1">
                                                        <span>添加人员</span>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div><!---->
                            </div>
                        </div> <!-- table-responsive -->
                    
                    </div>
                </div>

            </div>
        </div>

    </div>
    </div>
</template>

<script>
import axios from 'axios';
import Vue from 'vue';

export default {
    name:'Examinee_Info',
    data() {
        return {
            token: window.localStorage.getItem('token'), // 获取token
            checked:'',     //全选

            is_redact:'',   //是否修改成员信息
            is_delete:'',   //是否删除成员
            is_adduser:'', //是否添加成员
            is_del_users:"",   //是否删除多个成员
            is_del_department:'',   //是否删除部门
            is_select_dep:'',   //是否选择部门
            input_DEL:'',   //是否输入了DEL

            user_data: new Array(), //成员列表
            depart_data: new Array(),    //部门列表

            userinfo:{},  //成员信息
            name:'',    //姓名
            password:'',    // 密码
            is_password:'', // 确认密码
            mobile:'',  // 手机号/账号
            dep:'', // 部门
            gender:'',  // 性别
            email:'',   // 邮箱
            idnumber:'',    // 身份证号
            image:'',   // 证件照
            exam_id:'',     //需要操作的成员id

            user_ids:[],    // 复选框成员id
            mydata: {},     //添加的子部门
            depart_id:0,    //部门id
            depart_name:null, //部门名称
        }
    },
    // 获取默认部门成员列表/部门
    mounted(){
        axios({
            url:this.$api + '/user/examinfolist/',
            method:'GET',
            headers:{
                'authorization':this.token,  //携带token
            }
        }).then(res=>{
            if(res.data.code==200){
                this.user_data = res.data.user_data;    //成员列表
                this.depart_data = res.data.depart_data;  //部门列表
            }
        })
    },
    methods:{
        // 全选
        checkedAll() {
            if (this.checked) {//实现反选
                this.user_ids = [];
            } else { //实现全选
                this.user_ids = [];
                this.user_data.forEach( (depart) => {
                    this.user_ids.push(depart.id);
                });
            }
        },
        // 获取成员详细信息
        GetExamUserInfo(exam_id,dep_id){
            this.depart_id = dep_id;
            axios({
                url:this.$api + '/user/examinfo/?exam_id='+exam_id,
                method:'GET',
                headers:{
                    'authorization':this.token,  //携带token
                }
            }).then(res=>{
                if(res.data.code==200){
                    this.userinfo = res.data.userinfo;    //成员列表
                    this.gender = this.userinfo.gender
                    this.is_redact = 1;
                }
            })
        },
        // 修改成员信息
        UpdateExamUserInfo(exam_id){
            if(this.password!=this.is_password){
                alert('两次密码不相同');
                return;
            }
            // 封装数据
            let form_data = new FormData();
            form_data.append('exam_id',exam_id);
            form_data.append('name',this.name);
            if (this.password){
                form_data.append('password',this.password);
            }
            form_data.append('email',this.email);
            form_data.append('dep_id',this.depart_id);
            form_data.append('gender',this.gender);
            form_data.append('idnumber',this.idnumber);
            
            // form_data.append('img',Element.)
            axios({
                url:this.$api + '/user/examinfo/' ,
                method:'POST',
                data:form_data,
                headers:{
                    'authorization':this.token,  //携带token
                }
            }).then(res=>{
                if(res.data.code==200){
                    this.gender='';
                    axios({
                        url:this.$api + '/user/get_department_exam/?depart_id='+this.depart_id,
                        method:'GET',
                        headers:{
                            'authorization':this.token,  //携带token
                        }
                    }).then(res=>{
                        if(res.data.code==200){
                            this.user_data = res.data.user_data;    //成员列表
                            this.is_redact='';
                            this.depart_id = 0;
                        }
                    })
                }else{
                    alert('修改失败！');
                }
            })
        },
        // 添加成员
        adduser(){
            if(this.password!=this.is_password){
                alert('两次密码不相同');
                return;
            }
            // 封装数据
            let form_data = new FormData();
            form_data.append('name',this.name);
            form_data.append('mobile',this.mobile);
            form_data.append('password',this.password);
            form_data.append('email',this.email);
            form_data.append('dep',this.dep);
            form_data.append('gender',this.gender);
            form_data.append('idnumber',this.idnumber);
            form_data.append('dep_id',this.depart_id);
            // form_data.append('img',Element.)

            axios({
                url:this.$api + '/user/addexam/' ,
                method:'POST',
                data:form_data,
                headers:{
                    'authorization':this.token,  //携带token
                }
            }).then(res=>{
                if(res.data.code==200){
                    this.gender='';
                    axios({
                        url:this.$api + '/user/get_department_exam/?depart_id='+this.depart_id,
                        method:'GET',
                        headers:{
                            'authorization':this.token,  //携带token
                        }
                    }).then(res=>{
                        if(res.data.code==200){
                            this.user_data = res.data.user_data;    //成员列表
                            this.is_adduser='';
                            this.depart_id = null;
                        }
                    })
                }else{
                    alert('添加失败！');
                }
            })
        },
        // 删除成员
        del(){
            let form_data = new FormData();
            form_data.append('exam_id',this.exam_id);
            axios({
                url:this.$api + '/user/examinfolist/' ,
                method:'POST',
                data:form_data,
                headers:{
                    'authorization':this.token,  //携带token
                }
            }).then(res=>{
                if(res.data.code==200){
                    window.location.reload();
                }else{
                    alert('修改失败！');
                }
            })
        },
        // 显示确认删除多个成员框
        Is_del_users(){
            if(this.user_ids==''){
                alert('您还没有选择要删除的成员');
                return;
            }
            this.is_del_users = '1';
        },
        // 删除多个成员
        Del_users(){
            if(this.input_DEL!='DEL'){
                alert('输入DEL才可删除');
                return;
            }
            let form_data = new FormData();
            form_data.append('user_ids',this.user_ids);
            axios({
                url:this.$api + '/user/del_users/' ,
                method:'POST',
                data:form_data,
                headers:{
                    'authorization':this.token,  //携带token
                }
            }).then(res=>{
                if(res.data.code==200){
                    axios({
                        url:this.$api + '/user/examinfolist/',
                        method:'GET',
                        headers:{
                            'authorization':this.token,  //携带token
                        }
                    }).then(res=>{
                        if(res.data.code==200){
                            this.is_del_users = '';
                            this.user_data = res.data.user_data;    //成员列表
                            this.depart_data = res.data.depart_data;  //部门列表
                        }
                    })
                }else{
                    alert('修改失败！');
                }
            })
        },
        // 根据部门获取成员
        get_dep_user(depart_id){
            axios({
                url:this.$api + '/user/get_department_exam/?depart_id='+depart_id,
                method:'GET',
                headers:{
                    'authorization':this.token,  //携带token
                }
            }).then(res=>{
                if(res.data.code==200){
                    this.user_data = res.data.user_data;    //成员列表
                }
            })
            
        },
        // 显示确认删除弹框
        del_department(depart_id){
            this.is_del_department = 1;
            this.depart_id = depart_id
        },
        // 删除部门
        DEL_department_True(){
            if(this.input_DEL!='DEL'){
                alert('输入DEL才可删除');
                return;
            }
            let form_data = new FormData();
            form_data.append('depart_id',this.depart_id);
            axios({
                url: this.$api + '/user/del_department/',
                method:'POST',
                headers:{
                    'authorization':this.token,  //携带token
                },
                data:form_data,
            }).then(res=>{
                if(res.data.code==200){
                    // 获取默认部门成员列表/部门
                    axios({
                        url:this.$api + '/user/examinfolist/',
                        method:'GET',
                        headers:{
                            'authorization':this.token,  //携带token
                        }
                    }).then(res=>{
                        if(res.data.code==200){
                            this.is_del_department = '';
                            this.input_DEL = '';
                            this.depart_id = '';
                            this.depart_data = res.data.depart_data;  //部门列表
                        }
                    })
                }
            })
        },
        // 选择部门时获取部门
        get_department(depart_name,depart_id){
            this.depart_id = null;
            this.depart_name = depart_name;
            this.depart_id = depart_id;
        }
    },
    watch: { //深度 watcher
        user_ids: {
            handler: function (val, oldVal) {
            if (this.user_ids.length === this.user_data.length) {
                this.checked=true;
            } else {
                this.checked=false;
                }
            },
            deep: true
        }    
    }

}
</script>

<style>
.form-group {
    margin-bottom: 0px;
}
</style>
